<template>
  <!-- 热度分析 (接口时间需要调整)-->
  <div>
    <noPower v-if="!hasRoot" :minLeve="$store.state.userRoot[88][93].ownerMinLevel" />
    <div class="heat" id="heat" v-else>
      <div class="header" v-if="!hotshow && hotlineX">
        <div class="title">热度指数趋势图</div>
        <div class="ld_search_date">
          <radio_group :radio_values="['近7天', '30天', '90天']" v-model="value01" class="tab01" />
        </div>
      </div>
      <!-- 热度指数图 -->
      <!-- <div class="hotbox" v-if="!hotshow && hotlineX">
        <KChart
          v-if="hotlineX.length != 0 && !slLoading"
          :xData="hotlineX"
          :series1="hotlineY"
          name1="热度指数"
          title="热度指数"
        />
        <van-loading
          style="padding-top:1.5rem; box-sizing: border-box"
          class="loading"
          v-if="slLoading"
          type="spinner"
          :vertical="true"
        />
        <div class="tld_no_data" v-if="hasRoot && !hotlineX && !slLoading ">
          <img src="@/assets/one/zw.png" />
          <div class="zw">暂无数据</div>
        </div>
      </div> -->
      <!-- 扇形图 -->
      <div class="sector">
        <van-tabs v-model="active">
          <van-tab title="带货达人行业">
            <div style="height:5.1rem;" v-if="industryValue.length != 0 && !loading1">
              <BigPie :valueData="industryValue" />
            </div>
            <div class="tld_no_data" v-if="!industryValue.length && !loading1">
              <img src="@/assets/one/zw.png" alt />
              <div class="zw">暂无数据</div>
            </div>
          </van-tab>
          <van-tab title="商品类目分布">
            <div style="height:5.1rem;" v-if="active == 1 && categoryValue.length != 0 && !loading1">
              <BigPie :valueData="categoryValue" />
            </div>
            <div class="tld_no_data" v-if="!categoryValue.length && !loading1">
              <img src="@/assets/one/zw.png" alt />
              <div class="zw">暂无数据</div>
            </div>
          </van-tab>
        </van-tabs>
        <van-loading
          style="padding-top:1rem; box-sizing:border-box"
          class="loading"
          v-if="loading1"
          type="spinner"
          :vertical="true"
        />
      </div>
      <!-- 关联直播 + 关联视频 -->
      <div class="sector">
        <van-tabs v-model="active1">
          <van-tab title="关联直播数">
            <div style="height:5.6rem;" v-if="xData && xData.length != 0 && !loading22">
              <KChart
                v-if="xData.length != 0 && !loading22"
                :xData="xData"
                :series1="y1Data02"
                name1="关联直播数"
                title="个数"
              />
            </div>
            <div class="tld_no_data" v-if="!xData.length && !loading22">
              <img src="@/assets/one/zw.png" alt />
              <div class="zw">暂无数据</div>
            </div>
          </van-tab>

          <van-tab title="关联视频数">
            <div style="height:5.6rem;" v-if="xData.length != 0 && !loading22">
              <KChart
                v-if="xData.length != 0 && !loading22"
                :xData="xData"
                :series1="y1Data03"
                name1="关联视频数"
                title="个数"
              />
            </div>
            <div class="tld_no_data" v-if="!xData.length && !loading22">
              <img src="@/assets/one/zw.png" alt />
              <div class="zw">暂无数据</div>
            </div>
          </van-tab>
        </van-tabs>
        <van-loading
          style="padding-top:1rem; box-sizing:border-box"
          class="loading"
          v-if="loading22"
          type="spinner"
          :vertical="true"
        />
      </div>
      <!-- 总销量 + 直播销量 -->
      <div class="sector">
        <van-tabs v-model="active2">
          <!-- <van-tab title="总销量">
            <div style="height:5.6rem;" v-if="xData && xData.length != 0 && !loading22">
              <KChart
                v-if="xData.length != 0 && !loading22"
                :xData="xData"
                :series1="y1Data04"
                name1="总销量"
                title="销量"
              />
            </div>
            <div class="tld_no_data" v-if="!xData.length && !loading22">
              <img src="@/assets/one/zw.png" alt />
              <div class="zw">暂无数据</div>
            </div>
          </van-tab> -->
          <van-tab title="直播销量">
            <div style="height:5.6rem;" v-if="xData.length != 0 && !loading22">
              <KChart
                v-if="xData.length != 0 && !loading22"
                :xData="xData"
                :series1="y1Data05"
                name1="直播销量"
                title="销量"
              />
            </div>
            <div class="tld_no_data" v-if="!xData.length && !loading22">
              <img src="@/assets/one/zw.png" alt />
              <div class="zw">暂无数据</div>
            </div>
          </van-tab>
        </van-tabs>
        <van-loading
          style="padding-top:1rem; box-sizing:border-box"
          class="loading"
          v-if="loading22"
          type="spinner"
          :vertical="true"
        />
      </div>
    </div>
    <!--  -->
    <div class="line"></div>
  </div>
</template>
<script>
import KChart from '../talent/talentDetails/EComponents/KChart.vue';
import BigPie from '@/component/BigPiebrand.vue';
import radio_group from './component/radio_group.vue';
export default {
  components: { KChart, BigPie, radio_group },
  data() {
    return {
      value01: '30天',
      heatindexs: [], //是否有热度分析数据
      hotlineX: [], // 热度指数x轴
      hotlineY: [], //  热度指数y轴
      slLoading: false, // 热度指数 loading
      active: 0,
      industryValue: [], // 达人行业
      categoryValue: [], // 商品类目
      loading1: false, // 行业类目 loading
      active1: 0,
      active2: 0,
      loading22: false,
      xData: [],
      y1Data02: [],
      y1Data03: [],
      y1Data04: [],
      y1Data05: [],
      searchDates: [], //存放开始时间和结束时间
      startDateTime: '',
      endDateTime: '',
      dateTime: '',
      hotshow: false, // 热度指数的显示
      //周期
      period: [],
      value01_lo: '', // 第*周期
      startDate_lo: '', // 开始时间[周期]
      endDate_l0: '', // 结束时间[周期]
      hasRoot: true
    };
  },
  computed: {
    changeData() {
      const { value01 } = this;
      return {
        value01
      };
    }
  },
  watch: {
    value01: function (newVal, oldVal) {
      this.value01 = newVal;
      //热度指数
      this.heatindexs = [];
      //热度指数折线图
      (this.hotlineX = []), // 热度指数x轴
        (this.hotlineY = []), //  热度指数y轴
        this.gettrend();
    }
  },
  created() {
    this.getperiod().then(vipLevel => {
      if (vipLevel == 0) return;
      this.gettrend(); // 热度指数 折线图
      this.getlivetrend(); // 折线图
    });
    this.getsector(); //行业
  },
  methods: {
    // 获取 周期 （数据）
    getperiod() {
      return new Promise((resolve, reject) => {
        this.$axios
          .get('api/Brand/Periods')
          .then(res => {
            if (res.data.code == 0) {
              res.data.data.map((item, ind) => {
                this.period.push(
                  `第${item.cycle}期${item.startDate
                    .split(' ')[0]
                    .replace('-', '.')
                    .replace('-', '.')}-${item.endDate
                    .split(' ')[0]
                    .replace('-', '.')
                    .replace('-', '.')}`
                );

                return this.period;
              });
              this.value01_lo = this.period[0];
              this.startDate_lo = this.period[0].substring(5, 15);
              this.endDate_lo = this.period[0].substring(16, 26);
              resolve(this.period[0].substring(5, 15), this.period[0].substring(16, 26));
            }
          })
          .catch(err => {
            console.log(err);
          });
      });
    },
    // 热度指数 折线图
    gettrend() {
      this.startDateTime = localStorage.getItem('startDate');
      this.endDateTime = localStorage.getItem('endDate');
      this.dateTime = localStorage.getItem('date');
      let startDate;
      let endDate;
      let startDate1;
      let endDate1;
      let starttime;
      let endtime;
      starttime = this.timestamp(Date.now() / 1000 - 86400 * 90, 'Y-M-D');
      endtime = this.timestamp(Date.now() / 1000 - 86400 * 1, 'Y-M-D');
      let d = new Date(this.endDateTime);
      let T = d.getTime(d);
      switch (this.value01) {
        case '近7天':
          endDate = this.timestamp(T / 1000, 'Y-M-D');
          startDate = this.timestamp(T / 1000 - 86400 * 7, 'Y-M-D');
          endDate1 = this.timestamp(Date.now() / 1000 - 86400 * 1, 'Y-M-D');
          startDate1 = this.timestamp(Date.now() / 1000 - 86400 * 7, 'Y-M-D');
          break;
        case '30天':
          endDate = this.timestamp(T / 1000, 'Y-M-D');
          startDate = this.timestamp(T / 1000 - 86400 * 30, 'Y-M-D');
          endDate1 = this.timestamp(Date.now() / 1000 - 86400 * 1, 'Y-M-D');
          startDate1 = this.timestamp(Date.now() / 1000 - 86400 * 30, 'Y-M-D');
          break;
        case '90天':
          endDate = this.timestamp(T / 1000, 'Y-M-D');
          startDate = this.timestamp(T / 1000 - 86400 * 90, 'Y-M-D');
          endDate1 = this.timestamp(Date.now() / 1000 - 86400 * 1, 'Y-M-D');
          startDate1 = this.timestamp(Date.now() / 1000 - 86400 * 90, 'Y-M-D');
          break;
      }
      this.$axios
        .get('/api/Brand/HotIndex', {
          params: {
            brandId: this.$route.query.id,
            startDate: this.startDate_lo,
            endDate: this.endDate_lo
          }
        })
        .then(res => {
          if (res.data.code == 0) {
            this.hotshow = false;
            if (res.data.data != null) {
              this.heatindexs = res.data.data;
            }
          }
          if (res.data.code == 1004) {
            this.hotshow = true;
          }
          if (res.data.code == 1003) {
            this.hasRoot = false;
          }
        })
        .catch(err => {
          console.log(err);
        });
      // 热度分析
      this.slLoading = true;
      this.$axios
        .get('/api/Brand/HeatTrend', {
          params: {
            brandId: this.$route.query.id,
            startDate: this.startDate_lo,
            endDate: this.endDate_lo
          }
        })
        .then(res => {
          if (res.data.code == 1003) {
            this.hasRoot = false;
          }
          if (res.data.code == 0) {
            this.slLoading = false;
            this.hotlineX = res.data.data[0].map(element => {
              return this.timestamp(element, 'M/D');
            });
            this.hotlineY = res.data.data[1];
          }
        });
    },
    getFrontDate(dayNum){
      if(!dayNum) dayNum = 30;
      let dObj = new Date();
      let nTime = dObj.getTime();
      let startDate = this.timestamp(nTime / 1000 - 86400 * dayNum, 'Y-M-D');
      let endDate = this.timestamp(nTime / 1000 - 86400 * 1, 'Y-M-D');
      return {startDate,endDate}
    },
    // 达人行业+商品类目
    getsector() {
      this.loading1 = true;
      let datePms = this.getFrontDate();
      this.$axios
        .get('/api/Brand/Vocation', {
          params: {
            brandId: this.$route.query.id,
            ...datePms
          }
        })
        .then(res => {
          if (res.data.code == 0) {
            this.loading1 = false;
            this.industryValue = res.data.data.tradeRate; // 达人行业
            this.categoryValue = res.data.data.categoryRate; // 商品类目
          }
          if (res.data.code == 1003) {
            this.hasRoot = false;
          }
        });
    },
    // 关联视频/直播/销量 趋势图
    getlivetrend() {
      this.loading22 = true;
      let datePms = this.getFrontDate();
      this.$axios
        .get('/api/Brand/LiveTrend', {
          params: {
            brandId: this.$route.query.id,
            ...datePms
          }
        })
        .then(res => {
          if (res.data.code == '0') {
            this.loading22 = false;
            res.data.data.x.forEach(element => {
              this.xData.push(this.timestamp(element, 'M/D'));
              return this.xData;
            });
            this.y1Data02 = res.data.data.yvideo; // 关联视频
            this.y1Data03 = res.data.data.ylive; // 关联直播
            this.y1Data04 = res.data.data.ysalesTotal; // 总销量
            this.y1Data05 = res.data.data.ysalesLive; // 直播销量
          }
        })
        .catch(err => {
          console.log(err);
        });
    }
  }
};
</script>
<style lang="less" scoped>
.heat {
  width: 9.2rem;
  margin: 0 auto;
}
.header {
  position: relative;
  .title {
    position: relative;
    padding-left: 0.266667rem;
    font-size: 0.4rem;
    color: #222;
    margin-top: 0.6933rem;
    &:before {
      content: '';
      position: absolute;
      left: 0;
      top: 0.1rem;
      display: inline-block;
      width: 0.08rem;
      height: 0.373333rem;
      background-color: #fd7f2c;
      border-radius: 3px;
    }
  }
  // tab日期切换
  .ld_search_date {
    position: absolute;
    top: 0;
    right: 0;
    // margin-top: 0.4rem;
    font-size: 0;
    span {
      display: inline-block;
      padding: 0.08rem 0.186667rem;
      background-color: #fff;
      border-radius: 4px;
      border: solid 1px #e5e5e5;
      font-size: 0.32rem;
      margin-right: 0.2rem;
      &.active {
        background-color: #fd7f2c;
        border-color: #fd7f2c;
        color: #fff;
      }
    }
  }
}
// 热度指数
.hotbox {
  height: 5.6rem;
}
// 暂无数据
.tld_no_data {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 0.8rem;
  img {
    width: 4rem;
    height: 2.8rem;
    margin-top: 1rem;
  }
  .zw {
    font-size: 0.346667rem;
    color: #888;
  }
}
// 分割线
.line {
  width: 100%;
  height: 0.1866rem;
  background: #f1f1f1;
}
.loading{
  margin-bottom: .8rem;
}
</style>
